<template>
  <div class="yzh-basic">
    <div class="flex justify-between pb-3">
      <TitleName
        title="回款记录"
        icon="i-carbon-bookmark-filled"
        class="title"
      ></TitleName>
    </div>

    <el-table v-loading="loading" :data="tableList" border stripe>
      <el-table-column prop="repaymentDate" label="回款日期" width="150">
        <template #default="scope">
          <span>{{ parseTime(scope.row.repaymentDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="回款金额" width="150">
        <template #default="scope">
          <span>¥{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="payType" label="付款方式" width="150">
        <template #default="scope">
          <dict-drop :options="pay_type" :value="scope.row.payType" />
        </template>
      </el-table-column>
      <el-table-column prop="settleType" label="结算方式" width="150">
        <template #default="scope">
          <dict-drop :options="settle_type" :value="scope.row.settleType" />
        </template>
      </el-table-column>
      <el-table-column prop="repaymentUserName" label="收款人员" width="150">
      </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>
      <el-table-column prop="noticeUserNames" label="通知人员" width="200">
        <template #default="scope">
          <span>{{ scope.row.noticeUserNames }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        :align="'center'"
        class-name="small-padding fixed-width"
        width="150"
        fixed="right"
        v-if="tableParam.type != 'project'"
      >
        <template #default="scope">
          <el-button link type="primary" @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button link type="primary" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 10"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup name="RepaymentRecord">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useCommonStore from '@/store/modules/common'
import {
  delRepayment,
  listRepaymentRecord
} from '@/api/repaymentManage/repayment'
const router = useRouter()
const route = useRoute()
const props = defineProps({
  dataList: {
    type: [Object, Array],
    require: false
  },
  // 查询参数
  tableParam: {
    type: Object,
    required: false,
    default: () => {
      return {
        id: '',
        type: '' //customer客户 order订单 project项目
      }
    }
  }
})
const { proxy } = getCurrentInstance()
const commonStore = useCommonStore()
const { repayment_status, pay_type, settle_type } = proxy.useDict(
  'repayment_status', //回款状态
  'pay_type', //付款方式
  'settle_type' //结算方式
)
const data = reactive({
  loading: false,
  tableList: [],
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orderId: undefined,
    projectId: undefined
  }
})
let { loading, tableList, total, queryParams } = toRefs(data)

watchEffect(() => {
  if (props.dataList) {
    console.log('回款记录tableList.value==>', props.dataList)
    tableList.value = props.dataList
    queryParams.value.orderId = route.query.salesOrderId
  } else if (props.tableParam) {
    console.log('props.tableParam==>', props.tableParam)
    switch (props.tableParam.type) {
      case 'order':
        queryParams.value.orderId = props.tableParam.id
        break
      case 'customer':
        queryParams.value.customerId = props.tableParam.id
        break
      case 'project':
        queryParams.value.projectId = props.tableParam.id
        break
    }
    getList()
  }
})
// 获取数据列表
function getList() {
  loading.value = true

  listRepaymentRecord(queryParams.value).then(res => {
    loading.value = false
    tableList.value = res.rows
    // total.value = res.total
    console.log(' tableList.value==>', tableList.value)
  })
  console.log('获取数据')
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}

function handleUpdate(row) {
  goTo('/financial/repaymentForm', { repaymentId: row.id })
}
function handleDelete(row) {
  let rowIds = row.id
  proxy.$modal
    .confirm('是否确认删除')
    .then(function () {
      return delRepayment(rowIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 600;
}
</style>
